<template>
  <dl>
    <dt class="fs40 pb20 fw-b">默认样式</dt>
    <dd class="pb20">
      <t-image :src="`https://picsum.photos/200/200?random=${Math.random()}`" />
    </dd>
    <dd class="mt20">
      <pre v-highlight="image1"><code></code></pre>
    </dd>
  </dl>
  <dl class="pt40">
    <dt class="fs40 pb20 fw-b">单图片预览</dt>
    <dd class="pb20">
      <t-image :src="`https://picsum.photos/200/200?random=${Math.random()}`" is-visible />
    </dd>
    <dd class="mt20">
      <pre v-highlight="image2"><code></code></pre>
    </dd>
  </dl>
  <dl class="pt40">
    <dt class="fs40 pb20 fw-b">多图片自动点击可预览</dt>
    <dd class="pb20">
      <t-image :src="[
        `https://picsum.photos/200/200?random=${Math.random()}`,
        `https://picsum.photos/200/200?random=${Math.random()}`,
        `https://picsum.photos/200/200?random=${Math.random()}`,
        `https://picsum.photos/200/200?random=${Math.random()}`,
        `https://picsum.photos/200/200?random=${Math.random()}`,
        `https://picsum.photos/200/200?random=${Math.random()}`,
      ]" />
    </dd>
    <dd class="mt20">
      <pre v-highlight="image3"><code></code></pre>
    </dd>
  </dl>
  <dl class="pt40">
    <dt class="fs40 pb20 fw-b">圆角</dt>
    <dd class="pb20 d-f gap20">
      <t-image :src="`https://picsum.photos/200/200?random=${Math.random()}`" radius />
      <t-image :src="`https://picsum.photos/200/200?random=${Math.random()}`" radius="16" />
    </dd>
    <dd class="mt20">
      <pre v-highlight="image4"><code></code></pre>
    </dd>
  </dl>
  <dl class="pt40">
    <dt class="fs40 pb20 fw-b">大小</dt>
    <dd class="pb20 d-f gap20">
      <t-image :src="`https://picsum.photos/200/200?random=${Math.random()}`" :size="[100]" />
      <t-image :src="`https://picsum.photos/100/200?random=${Math.random()}`" :size="[100,200]" />
    </dd>
    <dd class="mt20">
      <pre v-highlight="image5"><code></code></pre>
    </dd>
  </dl>
  <dl class="pt40">
    <dt class="fs40 pb20 fw-b">懒加载</dt>
    <dd class="pb20 d-f gap20" v-for="i in 20" :key="i">
      <t-image :src="`https://picsum.photos/200/200?random=${Math.random()}`" lazy />
    </dd>
    <dd class="mt20">
      <pre v-highlight="image6"><code></code></pre>
    </dd>
  </dl>
</template>

<script setup lang="ts">
const image1 = `<t-image :src="\`https://picsum.photos/200/200?random=${Math.random()}\`" />`
const image2 = `<t-image :src="\`https://picsum.photos/200/200?random=${Math.random()}\`" is-visible />`
const image3 = `<t-image :src="[
        \`https://picsum.photos/200/200?random=${Math.random()}\`,
        \`https://picsum.photos/200/200?random=${Math.random()}\`,
        \`https://picsum.photos/200/200?random=${Math.random()}\`,
        \`https://picsum.photos/200/200?random=${Math.random()}\`,
        \`https://picsum.photos/200/200?random=${Math.random()}\`,
        \`https://picsum.photos/200/200?random=${Math.random()}\`,
]" />`
const image4 = `<t-image :src="\`https://picsum.photos/200/200?random=${Math.random()}\`" radius/>
<t-image :src="\`https://picsum.photos/200/200?random=${Math.random()}\`" radius="16"/>`
const image5 = `<t-image :src="\`https://picsum.photos/200/200?random=${Math.random()}\`" :size="[100]" />
<t-image :src="\`https://picsum.photos/100/200?random=${Math.random()}\`" :size="[100,200]" />`
const image6 = `<dd class="pb20 d-f gap20" v-for="i in 20" :key="i">
    <t-image :src="\`https://picsum.photos/200/200?random=${Math.random()}\`" lazy />
</dd>`
</script>

<style scoped lang="scss">

</style>
